<template>
  <div>
    <PageHeader
        hidden-breadcrumb
        title="出差审批编号：10000"
    >
        <template #action>
            <ButtonGroup>
                <Button>撤销</Button>
                <Button>取消</Button>
            </ButtonGroup>
            <Button type="primary">提交</Button>
        </template>
        <template #content>
            <DescriptionList :col="2">
                <Description term="申请人：">公孙离</Description>
                <Description term="部门：">可视化架构组</Description>
                <Description term="产品线：">View UI Plus</Description>
                <Description term="用途说明：">生产环境</Description>
                <Description term="申请时间：">2019-05-05</Description>
                <Description term="申请时长：">1年</Description>
            </DescriptionList>
        </template>
        <template #extra>
            <p style="color: #808695">状态</p>
            <p style="font-size: 24px">待审批</p>
        </template>
    </PageHeader>
    <Card title="申请流程" style="margin:20px;">
        <Steps :current="1">
            <Step title="申请" content="申请人：Henry"></Step>
            <Step title="Leader审批" content="审批人：Mon"></Step>
            <Step title="财务审批" content="审批人：Back"></Step>
        </Steps>
    </Card>
    <Card title="基础信息" style="margin:20px;">
        <Row style="padding-bottom: 16px;padding-top:16px">
            <i-col :lg="8">
                姓名：Henry
            </i-col>
            <i-col :lg="8">
                性别：男
            </i-col>
            <i-col :lg="8">
                城市：郑州市
            </i-col>
        </Row>
        <Row style="padding-bottom: 16px;">
            <i-col :lg="8">
                生日：1991-05-14
            </i-col>
            <i-col :lg="8">
                邮箱：q1@xx.xxx
            </i-col>
            <i-col :lg="8">
                地址：郑州市中原区
            </i-col>
        </Row>
    </Card>

    <Card title="行程信息" style="margin:20px;">
        <Row style="padding-bottom: 16px;padding-top:16px">
            <i-col :lg="8">
                出发地：郑州市
            </i-col>
            <i-col :lg="8">
                出发时间：2022-07-09
            </i-col>
            <i-col :lg="8">
                返程时间：2022-07-12
            </i-col>
        </Row>
        <Row style="padding-bottom: 16px;">
            <i-col :lg="8">
                交通工具：飞机
            </i-col>
            <i-col :lg="8">
                目的地：广州市
            </i-col>
        </Row>
    </Card>

    <Card title="同行人" style="margin:20px;">
        <Table style="padding-top:16px" :columns="columns" :data="data"></Table>
    </Card>
  </div>
</template>

<script>
export default {
    data () {
        return {
            columns: [
                {
                    title: 'Name',
                    key: 'name'
                },
                {
                    title: 'Age',
                    key: 'age'
                },
                {
                    title: 'Address',
                    key: 'address'
                }
            ],
            data: [
                {
                    name: 'John Brown',
                    age: 18,
                    address: 'New York No. 1 Lake Park'
                },
                {
                    name: 'Jim Green',
                    age: 24,
                    address: 'London No. 1 Lake Park'
                },
                {
                    name: 'Joe Black',
                    age: 30,
                    address: 'Sydney No. 1 Lake Park'
                },
            ]
        }
    },
    methods: {
       
    }
}
</script>
